<template>
    <div id='tmpl'>
        <div class="comment">
            <h3>添加评论</h3>
            <p></p>
            <textarea placeholder="请输入您的评论内容" v-model="postContent"></textarea>
            <mt-button type="primary" size="large" @click="postComment">提交</mt-button>
        </div>
        <div class="list">
            <h3>评论列表</h3>
            <p></p>
            <div class="mui-content"  v-for="(item,index) in list" :key="index">
                <div class="title">
                    <span>第{{index+1}}楼</span>
                    <span>用户:{{item.user_name}}</span>
                    <span>发表时间:{{item.add_time | datefmt("YYYY-MM-DD hh:mm:ss")}}</span>
                </div>
                    <ul class="mui-table-view">
                    <li class="mui-table-view-cell" v-html="item.content"></li>
                </ul>
            </div>
            <mt-button type="primary" size="large" @click="getmore">点击加载更多</mt-button>
        </div>
    </div>
</template>
<script>
import {Toast} from "mint-ui";
export default {
  name: "component_name",
  data () {
    return {
        postContent: '',
        list:[],
        pageindex:1
    };
  },
  props:["id"],
  created(){
      this.getcommentList(this.pageindex);
  },
  /* updated(){ //不可取,会与点击更多事件冲突
      this.getcommentList(this.pageindex);
  }, */
  methods:{
      //添加数据
      postComment(){
          if(this.postContent.trim().length<=0){
              Toast("输入内容不能为空");
              return
          }
          var url=this.$common.apidomain+"/api/postcomment/"+this.id;
          this.$http.post(url,{content:this.postContent},{emulateJSON:true}).then(res=>{ //es6的写法等同function(res){}
            //console.log(res)
            Toast(res.body.message);
            //添加后立马更新只是向数组放一条数据而已，不用再请求浪费流量，直接把你的数据用对象包装桶list格式一样追加进去就行
            this.list.unshift({user_name:"匿名用户",add_time:new Date(),content:this.postContent})
            this.postContent='';
          })
      },
      //获取数据
      getcommentList(pageindex=1){
          //var pageindex=pageindex||1;这步是为了给默认值通过es6可以如上函数的参数定默认值（pageindex=1），如果有传参就以传的为主，没有就默认1
          var url=this.$common.apidomain+"/api/getcomments/"+this.id+"?pageindex="+pageindex
          this.$http.get(url).then(res=>{
              console.log(res)
              var data=res.body;
              if(data.status!=0){
                  Toast(data.message);
                  return;
              }
              //this.list=data.message;
              this.list=this.list.concat(data.message); //拼接使用原数组里面拼接
            //方法2拼接:this.list.push.apply(this.list,res.data.message) //这里表示this.list调用push，这种写法可以默认的将数组每一项追加
            //方法3:data.message.forEach(element=>this.list.push(element)) //es6函数体只有一句代码时可以不用打{},用原先循环放每一个数据追加

          })
      },
      //点击加载更多
      getmore(){
          this.pageindex++; //要想传入另一个函数就得用Vue的data定义键值
          this.getcommentList(this.pageindex);
      }
  }
}
</script>
<style lang="css" scoped>
    .comment{
        padding: 5px;
    }
    .comment p{
        /* height: 0px; */
        border-top: 1px solid rgba(0,0,0,0.3);
    }
    .title{
            
            color: #6d6d72;
            font-size: 15px;
		}
</style>